<template>
    <div v-loading="loading">
        <el-form :inline="true" :model="checkApply" class="demo-form-inline">
            <el-form-item label="病人姓名" class="search">
                <el-input v-model="realName"></el-input>
            </el-form-item>
            <el-form-item label="病历状态">
                <el-select v-model="caseState">
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="暂存" value="1"></el-option>
                    <el-option label="已提交" value="2"></el-option>
                    <el-option label="诊毕" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table

                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="ID"
                    label="ID"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="caseNumber"
                    label="病历号"
                    width="80">
            </el-table-column>
            <el-table-column prop="register.realName"
                             label="病人姓名"
                             width="80">
            </el-table-column>
            <el-table-column prop="registID"
                             label="挂号ID"
                             width="80">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <p><span class="title">主诉：</span>{{scope.row.readme}}</p>
                    <p><span class="title">现病史：</span>{{scope.row.present}}</p>
                    <p><span class="title">现病治疗情况：</span>{{scope.row.presentTreat}}</p>
                    <p><span class="title">既往史：</span>{{scope.row.history}}</p>
                    <p><span class="title">过敏史：</span>{{scope.row.allergy}}</p>
                    <p><span class="title">体格检查：</span>{{scope.row.physique}}</p>
                    <p><span class="title">检查建议：</span>{{scope.row.proposal}}</p>
                    <p><span class="title">注意事项：</span>{{scope.row.careful}}</p>
                    <p><span class="title">检查结果：</span>{{scope.row.checkResult===''||null?'暂无':scope.row.checkResult}}</p>
                    <p><span class="title">诊断结果：</span>{{scope.row.diagnosis===''||null?'暂无':scope.row.diagnosis}}</p>
                    <p><span class="title">处理意见：</span>{{scope.row.handling===''||null?'暂无':scope.row.handling}}</p>
                    <p><span class="title">病历状态：</span>{{scope.row.caseState|caseState}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="readme"
                    label="主诉"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.readme==null?'待填写': scope.row.readme}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.readme==null?'待填写': scope.row.readme}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="present"
                    label="现病史"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.present==null?'待填写': scope.row.present}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.present==null?'待填写': scope.row.present}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="presentTreat"
                    label="现病治疗情况"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.presentTreat==null?'待填写': scope.row.presentTreat}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.presentTreat==null?'待填写': scope.row.presentTreat}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="history"
                    label="既往史"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.history==null?'待填写': scope.row.history}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.history==null?'待填写': scope.row.history}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="allergy"
                    label="过敏史"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.allergy==null?'待填写': scope.row.allergy}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.allergy==null?'待填写': scope.row.allergy}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="physique"
                    label="体格检查"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.physique==null?'待填写': scope.row.physique}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.physique==null?'待填写': scope.row.physique}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="proposal"
                    label="检查建议"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.proposal==null?'待填写': scope.row.proposal}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.proposal==null?'待填写': scope.row.proposal}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="careful"
                    label="注意事项"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.careful==null?'待填写': scope.row.careful}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.careful==null?'待填写': scope.row.careful}}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="checkResult"
                    label="检查结果"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.checkResult===(''||null)?'暂无':scope.row.checkResult }}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.checkResult===(''||null)?'暂无':scope.row.checkResult }}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="diagnosis"
                    label="诊断结果"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.diagnosis===(''||null)?'暂无': scope.row.diagnosis}}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.diagnosis===(''||null)?'暂无': scope.row.diagnosis }}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="handling"
                    label="处理意见"
                    width="120">
                <template scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div class="content">{{ scope.row.handling===(''||null)?'暂无':scope.row.handling }}</div>
                        <p slot="reference" class="line-wrapper">
                            <el-tag size="medium">{{ scope.row.handling===(''||null)?'暂无':scope.row.handling }}</el-tag>
                        </p>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="caseState"
                    label="病历状态"
                    width="120">
                <template scope="scope">
                    {{scope.row.caseState|caseState}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="page">
            <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.pageNum"
                    @current-change="handleCurrentChange"
                    :total="pageInfo.total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
    import {HOST} from "../../common/config";
    import {makeDate} from '../../common/dealDate'
    export default {
        data() {
            return {
                tableData: [],
                pageInfo:[],
                checkApply:{},
                realName:'',
                caseState:'',
                loading:true
            }
        },
        mounted:function () {
            this.getData(1);
        },
        methods: {
            getData(page){
                let path=`${HOST}/medicalRecords`;
                let params={
                    currentPage:page,
                    realName:this.realName,
                    caseState:this.caseState
                };
                this.$ajax.get(path,{
                    params:params
                }).then((res)=>{
                    this.pageInfo=res.data;
                    this.tableData=res.data.list;
                    this.loading=false
                })
            },
            handleCurrentChange(val){
                this.getData(val);
            },
            addMedicalRecord(){
                this.$router.push('/addMedicalRecord');
            },
            filterTag(value, row) {
                return row.isUrgent === value;
            },
            handleSearch(){
                this.getData(1);
            },
            handleEdit(index, row) {
                this.$router.push(`/editMedicalRecord/${row.ID}`)
            },
            handleDelete(index, row) {
                let path=`${HOST}/medicalRecord/delete`;
                this.$ajax.get(path,{params:{
                        id:row.ID
                    }}).then((res)=>{
                    if(res.data===1){
                        this.$message.success("删除成功！");
                        this.getData(1);
                    }else{
                        this.$message.error("服务器异常！");
                    }
                })
            }
        },
        filters:{
            dateFormat(val){
                return makeDate(val)
            },
            caseState(val){
                let res='';
                switch (val) {
                    case 1:res='暂存';break;
                    case 2:res='已提交';break;
                    case 3:res='诊毕';break;
                    default:res="已提交";break;
                }
                return res;
            }
        }
    }
</script>

<style scoped>
    .page{
        margin-top: 10px;
    }
    .search{
        margin-left: 10px;
    }
    .line-wrapper{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        white-space:nowrap;
    }
    .content{
        max-width: 220px;
    }
    .title{
        color: #99a9bf;
    }
</style>